<template class="all-page" xmlns="http://www.w3.org/1999/html">
  <div class="chat-container">
    <Taskbar></Taskbar>

    <!-- 左侧历史记录 -->
    <div class="sidebar">
      <!-- 发起新对话按钮 -->

      <el-tooltip
          class="box-item"
          effect="dark"
          content="新对话"
          placement="bottom"
      >
      <el-button
          type="primary"
          class="new-chat-btn"
          @click="startNewChat"
      >
        <div style="justify-content: flex-start">
          <el-icon>
            <ChatLineRound/>
          </el-icon>
        </div>
        发起新对话
      </el-button>
        </el-tooltip>
      <!-- 聊天记录列表 -->
      <el-menu class="chat-record-list">
        <el-menu-item
            v-for="chat in chatRecords"
            :key="chat.historyRecordId"
            :index="chat.historyRecordId.toString()"
            class="chat-record-item"
            :class="{'active': chat.historyRecordId === Number(currentHistoryRecordId)}"
        >
          <el-tooltip :content="chat.historyRecordName" placement="bottom" effect="light">
            <router-link
                :to="{ name: 'chat-box', params: { historyRecordId: chat.historyRecordId } }"
                style="text-decoration: none; display: flex; align-items: center; width: 100%;"
            >
              <!-- 聊天记录名称 -->
              <el-text class="chat-record-name">{{ chat.historyRecordName }}</el-text>
            </router-link>
          </el-tooltip>

          <el-tooltip
              class="box-item"
              effect="dark"
              content="选择"
              placement="top"
          >
            <el-icon class="chat-more-icon">
              <More />
            </el-icon>
          </el-tooltip>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧聊天区域 -->
    <div class="chat-box">
      <router-view :key="$route.params.historyRecordId" />
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { axiosInstance } from '@/axios'; // 假设 axios 已在此文件配置
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import {ChatLineRound, More} from "@element-plus/icons-vue";
import Taskbar from "@/components/chat/taskbar.vue";

const store = useStore();
const router = useRouter();
const route = useRoute();
const token = localStorage.getItem('token');
const chatRecords = computed(() => store.getters.getHistoryRecords);
const currentHistoryRecordId = computed(() => route.params.historyRecordId);

onMounted(() => {
  fetchHistoryRecords();
});

// 获取历史记录数据
const fetchHistoryRecords = () => {
  axiosInstance.get('/historyRecord/listHistoryRecord', {
    headers: { token }
  }).then(res => {

    if (res.data.code === 100000) {
      store.dispatch('setAllHistoryRecords', res.data.data);  // 更新 Vuex 中的记录
    }

  }).catch(err => {
    console.error("获取聊天记录失败", err);
  });
};

// 发起新对话
const startNewChat = () => {
  // 跳转到新对话页面
  router.push({ name: 'chat-default' });
};
</script>

<style scoped>



.chat-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.sidebar {
  width: 18%;
  background-color: #f4f6f9;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;

}

.new-chat-btn {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.new-chat-btn:hover {
  background-color: #5fa1fc;
  color: white;
  transform: scale(1.05);
}

.new-chat-btn .button-icon {
  margin-right: 8px;
  font-size: 20px;
}

.chat-record-list {
  flex-grow: 1;
  padding: 0;
  border: none;
  overflow-y: auto;
  max-height: 600px; /* 控制滚动区域的最大高度 */
  overflow-x: hidden;

  /* 自定义滚动条样式 */
  scrollbar-width: thin;  /* Firefox 滚动条设置 */
  scrollbar-color: #c4c3c3 #f0f0f0; /* Firefox 滚动条颜色 */

  /* 对于 WebKit 浏览器 (Chrome, Safari) */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #888;  /* 滚动条滑块颜色 */
    border-radius: 4px;  /* 滚动条滑块圆角 */
  }
  ::-webkit-scrollbar-track {
    background-color: #f0f0f0;  /* 滚动条轨道颜色 */
    border-radius: 4px;  /* 轨道圆角 */
  }
}



.chat-record-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 12px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  position: relative;
  width: 100%; /* 确保容器宽度为100% */
  box-sizing: border-box;
}

.chat-record-item:hover {
  background: linear-gradient(90deg, #81e2fc 0%, #5fa1fc 100%);
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.chat-record-item.active {
  background-color: #5fa1fc;
  color: #ffffff;
  transform: scale(1.02);
  border-color: #5fa1fc;
}

.chat-record-name {
  font-weight: 200;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-left: 10px;
  max-width: 190px;
  font-family: '宋体', sans-serif;
  flex-grow: 1; /* 占据剩余空间 */
  flex-shrink: 1; /* 允许缩小 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: clip; /* 以省略号显示溢出文本 */
  margin-right: 20px; /* 确保与图标保持5px的距离 */
}

.chat-more-icon {
  position: absolute;
  right: 20px;
  flex-shrink: 0; /* 不允许缩小 */
  font-size: 20px;
  cursor: pointer;
}

router-link {
  display: flex;
  align-items: center;
  width: 100%; /* 确保 router-link 占满父容器 */
}

.chat-box {
  flex: 1;
  padding: 0;
  background-color: #fff;
}
</style>
